<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好React</title>
        <!-- 1. 引入react核心库 -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <!-- 2. 引入react-dom 用于支持react操作dom -->
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <div id="root"></div>
        <script>
            console.log('React',React,ReactDOM);
            // 3.创建React元素
            /*
            三个API
            React.createElement(type代表元素的类型，属性，节点/子节点)
            */
            let title = React.createElement('h1', null, '8520')
            // 4.渲染元素到页面中
            // 17 版本用法
            //   ReactDOM.render(title, document.getElementById('root'))
            // 18 版本用法
            // 创建根节点
            let root=ReactDOM.createRoot(document.getElementById('root'))
            //    渲染元素到页面中
            root.render(title)


            // 虚拟DOM ->普通对象
            console.log('VDOM',title);
            console.log('TDOM',document.getElementById('root'));

            let TDOM=document.getElementById('root')
            // debugger
            // 判断数据的类型 typeof instanof
            let arr=[]  //array ->object
            console.log('title-typeof',typeof title,typeof arr);
            console.log('title-instanceof',title instanceof Object);
            console.log('arr-instanceof',arr instanceof Array);
            </script>
</head>
<body>
    
</body>
</html>